/**
 *                              谷歌地图功能点
 *        文字描述                                        方法
 * 1、初始化地图                                        initMap()
 * 2、设置个人标记点                                     setMePositioning()
 * 4、接口请求加载动画                                   LoadAnimation()
 * 5、随机生成一段数据（实际中不需要）                     randomChinese()
 * 7、监听地图中心点的变化(滑动地图看变化)                  addListenerCnterChange()
 * 8、监听marker标记点点击显示信息窗口                    ListeningMarkerClick()
 * 9、可视地图放大缩小                                   setMapZoom()
 * 10、移除个人标记点                                    removeMarker()
 * 11、随机生成颜色rgb值                                 getRandomColor()
 * 13、点击信息弹窗窗口                                   setTimeoutInfoWindowClick()
 * 15、监听marker标记点 赋予当前点动画                     markerClickAnimation()
 * 16、画路线、清除路线                                    drawRoute() 、clearDrawRoute()
 * 17、放大、缩小                                         setMapCnterZooms()（和【9】一样都可以放大缩小地图）
 *    功能不同：map.setOptions({zoom: newZoom}) 可以用于设置和更改地图的所有属性，而 map.setZoom(newZoom) 仅用于更改地图的缩放级别。
 *     语法不同：map.setOptions() 方法接受一个包含更改设置的键值对对象作为参数，可以对地图进行更全面的控制。而 map.setZoom() 方法则直接接受新的缩放级别作为参数
 * 18、获取附近POI		                                    searchPOI()
 * 19、模糊查询地址	                                     getPlacesList()
 * 20、根据PlaceId获取详细地址                             getDetailByPlaceId()
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *https://maps.gstatic.com/mapfiles/transparent.png - 透明的 PNG 图片。
 *https://maps.googleapis.com/maps/api/js+ /v1/shading/{layerId}/{zoom}/{x}/{y}?key=YOUR_API_KEY  - 地图阴影层图片。
 *https://maps.gstatic.com/mapfiles/ms2/micons/blue-dot.png - 蓝色标记图标。
 *https://maps.gstatic.com/mapfiles/ms2/micons/red-dot.png - 红色标记图标。
 *https://maps.gstatic.com/mapfiles/ms2/micons/green-dot.png - 绿色标记图标。
 *https://maps.gstatic.com/mapfiles/ms2/micons/yellow-dot.png - 黄色标记图标。
 *https://maps.gstatic.com/mapfiles/ms2/micons/orange-dot.png - 橙色标记图标。
 *https://maps.gstatic.com/mapfiles/ms2/micons/pink-dot.png - 粉色标记图标。
 *https://maps.gstatic.com/mapfiles/ms2/micons/purple-dot.png - 紫色标记图标。
 *https://maps.gstatic.com/mapfiles/ms2/micons/blue.png - 蓝色方形图标。
 *https://maps.gstatic.com/mapfiles/ms2/micons/red.png - 红色方形图标。
 *https://maps.gstatic.com/mapfiles/ms2/micons/green.png - 绿色方形图标。
 *https://maps.gstatic.com/mapfiles/ms2/micons/yellow.png - 黄色方形图标。
 *https://maps.gstatic.com/mapfiles/ms2/micons/orange.png - 橙色方形图标。
 *https://maps.gstatic.com/mapfiles/ms2/micons/pink.png - 粉色方形图标。
 *https://maps.gstatic.com/mapfiles/ms2/micons/purple.png - 紫色方形图标。 
 *
 *  数据可视化平台：http://datav.aliyun.com/portal/school/atlas/area_selector
 * 
 */




var lats = getQueryVariable('lat') * 1;
var lngs = getQueryVariable('lng') * 1;
var waitinit = getQueryVariable('waitinit')
let openInfoWindow; //信息窗口
var meMarker = ''; //个人位置标记点
var markers = []; //marker标记点

var maxValue = 10;
var nums = 13;
var zoom = Number(nums); //地图缩放比例
var map; //地图
var lastClickedMarker = ""; //记录当前点击的marker
var directionsRenderer = ""; //地图画线
var dueArrive = '';
var testData = '';
/**
 *监听marker标记点点击事件 
 *点击后右上角显示弹窗
 * 信息窗口弹窗
 * 
 *clickIndex  点击的下标
 *
 */
function ListeningMarkerClick(marker, clickIndex) {
	var contentString = '<div id="myButton_' + clickIndex + '">' +
		'<div class="infoWindow-title">' + marker.title + '</div>' +
		'<p class="textoverflow">' +
		randomChinese(20) + '</p>' +
		'<img class="imgs" src=' + marker.imgUrl +
		'/>' +
		'</div>';
	var infowindow = new google.maps.InfoWindow({
		content: contentString
	});
	/**
	 * 监听点击maker标记点弹出信息窗
	 * 
	 * */
	google.maps.event.addListener(marker, 'click', function() {
		// infowindow.open(map, marker); //多个信息窗口显示

		if (openInfoWindow) { //单个信息窗口
			openInfoWindow.close();
		}
		infowindow.open(map, marker);
		openInfoWindow = infowindow;
		setTimeoutInfoWindowClick(clickIndex);

	});
	// 关闭信息窗口
	infowindow.addListener('closeclick', () => {
		Toast('关闭了信息窗口', 500)
	});

}
/**
 * 监听信息窗口点击事件
 * 开发使用场景：点击路由跳转 或者传参
 * 
 * */
function setTimeoutInfoWindowClick(clickIndex) {
	setTimeout(() => {
		var element = document.getElementById('myButton_' + clickIndex);
		element.addEventListener("click", function() {
			Toast('点击了第' + clickIndex + '个信息窗口元素')

		});
	}, 50)
}
/**
 * 监听地图滑动中心点变化
 * 
 * */
function addListenerCnterChange() {
	// 实时监听中心点变化
	map.addListener("center_changed", () => {
		const center = map.getCenter();
		// Toast(center.lat() + ", " + center.lng())
	});
	// 侦听地图载入事件
	google.maps.event.addListenerOnce(map, 'idle', function() {
		// Toast('idle事件', 1000)
	});
	// 侦听地图拖拽事件
	google.maps.event.addListener(map, 'drag', function() {
		// Toast('拖拽事件', 1000)
	});
	// 侦听地图停止事件并获取地图中心点坐标
	google.maps.event.addListener(map, 'idle', function() {
		// clearCircle()
		// var latLng = map.getCenter();
		// LoadAnimation(true)
		// lats = latLng.lat();
		// lngs = latLng.lng();
		// removeMarker();
		// addListenerCnterChange()
	});
	// 监听地图缩放事件并在不同缩放级别下切换数字图标
	google.maps.event.addListener(map, 'zoom_changed', function() {

	});



}

/**
 * 监听marker点 点击事件  赋予当前点击的marker标记点动画 
 * 并清除其他marker动画
 *  BOUNCE: 1
 *	 DROP: 2
 *	 KE: 4
 *	 PE: 3
 * */
function markerClickAnimation(marker) {
	marker.addListener('click', function() {
		if (lastClickedMarker && lastClickedMarker.getAnimation() !== null) {
			lastClickedMarker.setAnimation(null);
		}
		// 设置当前点击的 Marker 动画效果
		marker.setAnimation(google.maps.Animation.PE);
		// 记录当前点击的 Marker
		lastClickedMarker = marker;
	});
}


/**
 * 移入marker标记点
 * 
 * */
function removeMarker() {
	for (var i = 0; i < markers.length; i++) {
		markers[i].setMap(null);
	}
	// 清空数组
	markers = [];
}

/**
 * 初始化
 * 
 */
function initMap() {
	uni.postMessage({
		data: {
			action: 'initPosition'
		}
	});
}
var coords = ""
var cost = ""

function initMap2(startPosition, endPosition) {
	if (lats && lngs) {
		coords = {
			lat: lats,
			lng: lngs
		};
		initMap3(startPosition, endPosition)
	} else {
		navigator.geolocation.getCurrentPosition(function(position) {
			coords = {
				lat: position.coords.latitude,
				lng: position.coords.longitude
			};
			map = new google.maps.Map(document.getElementById('map'), {
				zoom: zoom,
				center: coords,
				mapId: "your map id",
				animation: 'BOUNCE',
				draggable: true
			});
			searchPOI(coords, startPosition, endPosition)
		});
	}
}

function initMap3(startPosition, endPosition) {
	if (!map) {
		map = new google.maps.Map(document.getElementById('map'), {
			zoom: zoom,
			center: coords,
			mapId: "your map id",
			animation: 'BOUNCE',
			draggable: true
		});
	}
	setMePositioning();
	addListenerCnterChange();
	if (startPosition && endPosition) {
		drawRoute(startPosition, endPosition);
	}
}

/**
 * 画路线图
 * 
 * 
 * */
function drawRoute(startPosition, endPosition) {
	// 随机数字而已  动态数字  方便查询效果
	let min = 5000;
	let max = 10000;
	let randomNum = (Math.floor(Math.random() * (max - min + 1)) + min) / 500000;
	// 起点坐标
	const origin = {
		lat: startPosition.latitude,
		lng: startPosition.longitude
	};
	// 终点坐标
	const destination = {
		lat: endPosition.latitude,
		lng: endPosition.longitude
	};

	directionsRenderer = new google.maps.DirectionsRenderer({
		map: map,
		suppressMarkers: true, // 关闭默认图标
		polylineOptions: {
			strokeColor: "#2FD4B8", //设置路线颜色
			strokeOpacity: 1.0, // 设置路线透明度
			strokeWeight: 8 //设置路线宽度
		}
	});
	const directionsService = new google.maps.DirectionsService();
	const request = {
		origin: origin,
		destination: destination,
		travelMode: google.maps.TravelMode.DRIVING,
	};
	directionsService.route(request,
		(result, status) => {
			if (status === "OK") {
				directionsRenderer.setDirections(result);
				directionsRenderer.setMap(map);
				// 获取距离和持续时间
				const route = result.routes[0];
				const leg = route.legs[0];
				const distance = leg.distance.text;
				const duration = leg.duration.text;
				dueArrive = `距离${distance}, ${duration}`
				const now = new Date();
				const times = now.getTime() + (parseInt(duration) + 1) * 60 * 1000
				const formattedTime = convertTimestampToTime(times)

				uni.postMessage({
					data: {
						action: 'distance',
						distance: distance
					}
				});
				// 获取起点
				const startMarker = new google.maps.Marker({
					position: result.routes[0].legs[0].start_location,
					map: map,
					icon: {
						url: "../../../static/my-position.png",
						scaledSize: new google.maps.Size(30, 35), // 图标的大小
						origin: new google.maps.Point(0, 0), // 图标中心的偏移量
						anchor: new google.maps.Point(15, 15) // 图标的锚点，通常是图标中心
					},
				});
				const endMarker = new google.maps.Marker({
					position: result.routes[0].legs[0].end_location, // 终点的经纬度
					map: this.map, // 使用你的地图实例
					title: '终点',
					// 如果需要自定义图标，可以添加以下属性
					icon: {
						url: '../../../static/position.png',
						scaledSize: new google.maps.Size(16, 25), // 图标的大小
						origin: new google.maps.Point(0, 0), // 图标中心的偏移量
						anchor: new google.maps.Point(10, 10) // 图标的锚点，通常是图标中心
					}
				});
				// 创建终点的信息窗口
				const endInfoWindow = new google.maps.InfoWindow({
					content: `
				<view class="startInfo">
				   <view class="top">正在前往目的地
					  <span class="time" style="margin-left: 10px;">${dueArrive}</span>
					 </view>
					 <view class="bottom flex">卷前价 <span class="price">${cost}</span><span class="van-icon van-icon-arrow"></span></view>
				</view>`
				});

				// 自动显示终点的信息窗口
				endInfoWindow.open(this.map, endMarker);

				google.maps.event.addListener(endInfoWindow, 'domready', function() {
					// 获取bottom元素的引用
					const endBottom = document.querySelector('.endInfo .bottom');
					// 添加点击事件
					endBottom.addEventListener('click', function() {
						// 执行您的点击事件逻辑
						uni.postMessage({
							data: {
								action: 'changeEndPosition'
							}
						});
					});
				});
			} else {
				uni.postMessage({
					data: {
						action: 'drawRouteErr'
					}
				});
			}
		}
	);
}

function convertTimestampToTime(timestamp) {
	// 创建一个新日期对象，使用时间戳（毫秒）
	var date = new Date(timestamp);

	// 获取小时和分钟
	var hours = date.getHours();
	var minutes = date.getMinutes();

	// 格式化小时和分钟，确保总是两位数
	hours = hours.toString().padStart(2, '0');
	minutes = minutes.toString().padStart(2, '0');

	// 返回格式化的时间字符串
	return hours + ':' + minutes;
}


/**
 * 清除路线
 * 
 * */
function clearDrawRoute() {
	if (directionsRenderer) {
		directionsRenderer.setMap(null)
	}

}


/**
 * 绘制地图
 * 
 * 
 * */
function drawMap() {
	LoadAnimation(true)
	// 删除
	clearCircle();
	// removeMeMarker();
	removeMarker();
	setMePositioning();
	addListenerCnterChange()
	setMapZoom(zoom);

}
/**
 * 可视地图放大缩小
 * 
 * 
 * */
function setMapZoom(newZoom) {
	map.setZoom(newZoom);
}
/*
 *设置个人定位以及显示marker标记点
 * 
 **/
function setMePositioning() {
	meMarker = new google.maps.Marker({
		position: {
			lat: lats,
			lng: lngs
		},
		icon: {
			url: '../../../static/my-position.png',
			scaledSize: new google.maps.Size(30, 35), // 图标的大小
			origin: new google.maps.Point(0, 0), // 图标中心的偏移量
			anchor: new google.maps.Point(15, 15) // 图标的锚点，通常是图标中心
		},
		animation: 4,
		map: map
	});
	LoadAnimation(false)
}
/**
 * 移除个人信息标记点
 * 
 * 
 * */
function removeMeMarker() {
	meMarker.setMap(null);
	meMarker = '';
}
/**
 * 控制地图大小
 * 缩放和放大
 * 通过zoom来控制
 * 
 * */
function setMapCnterZooms() {
	map.setOptions({
		center: {
			lat: lats + 0.001,
			lng: lngs + 0.0001
		},
		zoom: zoom + 0.1
	});
}
/**
 * 加载动画
 * 
 */
function LoadAnimation(isFalse) {
	if (isFalse) {
		document.getElementById("loader").style.display = "inline";
	} else {
		document.getElementById("loader").style.display = "none";
	}

}

/**
 * 
 * 获取url地址参数
 * 
 * */

function getQueryVariable(variable) {
	var query = decodeURI(window.location.search.substring(1));
	var vars = query.split("&");
	for (var i = 0; i < vars.length; i++) {
		var pair = vars[i].split("=");
		if (pair[0] == variable) {
			return pair[1];
		}
	}
	return (false);
}
/**
 * 随机生成颜色rgb值
 * 
 * */

function getRandomColor() {
	const letters = '0123456789ABCDEF'; // 16进制颜色表示中可能出现的字符
	let color = '#';
	for (let i = 0; i < 6; i++) { // 随机生成6位十六进制数
		color += letters[Math.floor(Math.random() * 16)]; // 根据随机数选取相应的字符
	}
	return color;
}


/**
 * 随机生成中文文字
 * 辅助方法 实际中可废弃
 * */
function randomChinese(num) {

	let str = "";
	const words = ["Lorem", "ipsum", "dolor", "sit", "amet", "consectetur", "adipiscing", "elit", "sed", "do",
		"eiusmod", "tempor",
		"incididunt", "ut", "labore", "et", "dolore", "magna", "aliqua", "Ut", "enim", "ad", "minim", "veniam",
		"quis",
		"nostrud", "exercitation", "ullamco", "laboris", "nisi", "ut", "aliquip", "ex", "ea", "commodo",
		"consequat",
		"Duis", "aute", "irure", "dolor", "in", "reprehenderit", "in", "voluptate", "velit", "esse", "cillum",
		"dolore",
		"eu", "fugiat", "nulla", "pariatur", "Excepteur", "sint", "occaecat", "cupidatat", "non", "proident",
		"sunt",
		"in", "culpa", "qui", "officia", "deserunt", "mollit", "anim", "id", "est", "laborum"
	];
	for (let i = 0; i < num; i++) {
		const randomWord = words[Math.floor(Math.random() * words.length)];
		str += randomWord + " ";
	}
	return str.trim();
}

// 搜索附近的poi
function searchPOI(pos, startPosition, endPosition) {
	let service = new google.maps.places.PlacesService(map);
	service.nearbySearch({
		location: pos,
		radius: 500, // 搜索半径，单位为米
		type: ['point_of_interest'] // 搜索类型为兴趣点
	}, function(results, status) {
		if (status === google.maps.places.PlacesServiceStatus.OK) {
			if (results[0]) {
				coords = {
					lat: results[0]?.geometry?.location.lat(),
					lng: results[0]?.geometry?.location.lng()
				};
				lats = coords.lat;
				lngs = coords.lng;
				uni.postMessage({
					data: {
						action: 'currentPosition',
						currentPOI: {
							address: results[0].name,
							latitude: lats,
							longitude: lngs
						}
					}
				});
				initMap3(startPosition, endPosition);
			}
		}
	});
}

// 模糊查询地址
function getPlacesList(obj) {
	const {
		text
	} = obj
	if (!text) return
	const autocomplete = new google.maps.places.AutocompleteService();
	autocomplete.getPlacePredictions({
		input: text
	}, function(predictions, status) {
		if (status == google.maps.places.PlacesServiceStatus.OK) {
			uni.postMessage({
				data: {
					action: 'placesList',
					predictions: predictions
				}
			});
		}
	});
}
// 根据PlaceId获取详细地址
function getDetailByPlaceId(obj) {
	const {
		placeId,
		address
	} = obj
	if (!placeId) return
	if (!map) {
		navigator.geolocation.getCurrentPosition(function(position) {
			coords = {
				lat: position.coords.latitude,
				lng: position.coords.longitude
			};
			map = new google.maps.Map(document.getElementById('map'), {
				zoom: zoom,
				center: coords,
				mapId: "your map id",
				animation: 'BOUNCE',
				draggable: true
			});
		});
	}
	const request = {
		placeId: placeId,
		fields: ['geometry.location'],
	};
	new google.maps.places.PlacesService(map).getDetails(request, (place, status) => {
		if (status === google.maps.places.PlacesServiceStatus.OK) {
			const location = place.geometry.location;
			uni.postMessage({
				data: {
					action: 'placesDetail',
					position: {
						latitude: location.lat(),
						longitude: location.lng(),
						address: address
					}
				}
			});
		} else {
			console.error('Place details request failed due to:', status);
		}
	});
}

window.initMap = initMap;



const appHtml = {
	data() {
		return {
			value: maxValue, //默认筛选距离
		}
	},
	methods: {}
}
// 创建
const app = Vue.createApp(appHtml)
// 引入vant组件
app.use(vant);
// 自动注册 Lazyload 组件
app.use(vant.Lazyload);

// 引入button
app.use(vant.Button);
// 引入宫格布局
app.use(vant.Grid);
app.use(vant.GridItem);
// 空状态
app.use(vant.Empty);